<template>
<div class='category'>
  <h1>Category</h1>
  <button @click="buttonClickA"> 更改为A</button>
  <button @click="buttonClickB"> 更改为B</button>
  <button @click="buttonClickC"> 更改为C</button>
  <component :is='componentTag'></component>
</div>
</template>

<script>

import ComponentA from '../../components/dycomponets/ComponentA.vue'
import ComponentB from '../../components/dycomponets/ComponentB.vue'
import ComponentC from '../../components/dycomponets/ComponentC.vue'

export default {
  components: {
    ComponentA,
    ComponentB,
    ComponentC
  },
  data() {
    return {
      componentTag: "ComponentA"
    }
  },
  methods: {
    buttonClickA() {
      this.componentTag = "ComponentA";
    },
    buttonClickB() {
      this.componentTag = "ComponentB";
    },
    buttonClickC() {
      this.componentTag = "ComponentC";
    }
  }
}
</script>
<style scoped>

</style>